{% load staticfiles %}
<!DOCTYPE html>
<link rel="stylesheet" href="//cdnjs.loli.net/ajax/libs/mdui/0.4.2/css/mdui.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/heyui"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/heyui/themes/index.css"></link>


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<!-- ZUI 标准版压缩后的 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/zui/1.9.0/css/zui.min.css">

<!-- ZUI Javascript 依赖 jQuery -->
<script src="//cdn.bootcss.com/zui/1.9.0/lib/jquery/jquery.js"></script>
<!-- ZUI 标准版压缩后的 JavaScript 文件 -->
<script src="//cdn.bootcss.com/zui/1.9.0/js/zui.min.js"></script>
<link href="{% static 'blog/css/zui.datagrid.min.css' %}" rel="stylesheet">
<link href="{% static 'blog/css/form.css' %}" rel="stylesheet">
<script src="{% static  'blog/js/zui.datagrid.min.js' %}"></script>
<script src="{% static  'blog/js/echarts.min.js' %}" charset="utf-8"></script>


<script>
	
	$(document).ready(function(){
//		function add_preview(data){
//			data.forEach(function(value,index,array){
////				console.log(value);
////				console.log($(value["selector"]));
//				$(value["selector"]).popover();
//					
////				$(value["selector"]).on('shown.zui.tooltip', function() {
////					$('.tooltip-inner').append('<img src='+value.img_link+'/>');
////				});	
//			})
//			
//			
//		}
//		
		
		{% if has_search_table %}
		function show_error(msg)
		{
			new $.zui.Messager(msg,	{
			    type: 'warning' // 定义颜色主题
			}).show();
		}
		function check_range(min_pt,max_pt){
			
			if(min_pt.val().length != 0 && max_pt.val().length != 0)
			{
				if(min_pt.val()<0)
				{
					return 1;
				}
				if(max_pt.val()<0)
				{
					return 1;
				}
				if(parseFloat(min_pt.val())>parseFloat(max_pt.val()))
				{
					return 2;
				}
			}else if(min_pt.val().length != 0)
			{
				if(min_pt.val()<0)
				{
					return 1;
				}
			}else if(max_pt.val().length != 0)
			{
				if(max_pt.val()<0)
				{
					return 1;
				}
			}
		}
		//搜索时显示
		$(".search_title").click(function(){
			var min_pt = $("#input-price-min");
			var max_pt = $("#input-price-max");
			var min_st = $("#input-star-min");
			var max_st = $("#input-star-max");
			var search_tt = $("#input-text");
			var type = $("#type_filter")
			//全为空，有一个为空且不为负
			
			var res = check_range(min_pt,max_pt);
			if(res == 1)
			{
				show_error("价格不能小于0.");
				return;
			}else if(res == 2)
			{
				show_error("价格区间有误");
				return;
			}
			res = check_range(min_st,max_st);
			if(res == 1)
			{
				show_error("评分不能小于0.");
				return;
			}else if(res == 2)
			{
				show_error("评分区间有误");
				return;
			}
			
			if(min_pt.val().length==0 && max_pt.val().length == 0 && min_st.val().length == 0&&max_st.val().length == 0 && search_tt.val().length == 0)
			{
				if(type.val() == "--"){
					show_error("所有输入为空!");
					return;	
				}
			}
			
			
			$.ajax({
				type:'post',
				url:'/search/title/',
				cache:false,
				data:$(".search_title-form").serialize(),
				dataType:'json',
				success:function(data){
					$(".datagrid-row").remove();
					
					var dg = $('#datagrid-book').data('zui.datagrid');
					dg.setDataSource(
						{
			            cols:[
		                {name: 'title', label: '书名', width: 0.60,html:true},
		                {name: 're_type', label: '类型', width: 0.12},
		                {name: 'author', label: '作者', width: 0.12},
		                {name: 'isbn', label: 'ISBN', width: 0.1},
		                {name: 're_press', label: '出版社', width: 0.17},
		                {name: 'price', label: '价格', width: 0.05},
		                {name: 'star', label: '评分', width: 0.05},
		                {name: 'field', label: '来自', width: 0.06,html:true},
		            	],
		            	array:data.data,
			        	}
					);
					dg.render();
//					dg.renderData();
					
					dg.updateLayout();	
//					dg.renderScrolls();
//					add_preview(data.data);
//					console.log(data.data);
					
				}
			});
        });
        {% endif %}
        
        {% if has_show_table %}
        $.get("/search/title/{{directly_search_api}}",function(data){
			$('#datagrid-book').datagrid({
    			height:"800",
		        dataSource: {
			            cols:[
		                {name: 'title', label: '书名', width: 0.60,html:true},
		                {name: 're_type', label: '类型', width: 0.12},
		                {name: 'author', label: '作者', width: 0.12},
		                {name: 'isbn', label: 'ISBN', width: 0.1},
		                {name: 're_press', label: '出版社', width: 0.17},
		                {name: 'price', label: '价格', width: 0.05},
		                {name: 'star', label: '评分', width: 0.05},
		                {name: 'field', label: '来自', width: 0.06,html:true},
		            	],
	            	array:data.data,
		        	},			
		        sortable:true,
			});
			
		})
        {% else %}
        //设置表格架构
        $('#datagrid-book').datagrid({
			height:"800",
	        dataSource: {
			            cols:[
		                {name: 'title', label: '书名', width: 0.60,html:true},
		                {name: 're_type', label: '类型', width: 0.12},
		                {name: 'author', label: '作者', width: 0.12},
		                {name: 'isbn', label: 'ISBN', width: 0.1},
		                {name: 're_press', label: '出版社', width: 0.17},
		                {name: 'price', label: '价格', width: 0.05},
		                {name: 'star', label: '评分', width: 0.05},
		                {name: 'field', label: '来自', width: 0.06,html:true},
		            	],
            		array:[],
	        	},			
	        sortable:true,
		});
        {% endif %}
	});
</script>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<nav class="navbar " role="navigation">
		  	<div class="container-fluid">
		    <!-- 导航头部 -->
		    <div class="navbar-header">
		        <a class="navbar-brand" href="/">WDM{{head_text}}</a>
		    </div>
		    <!-- 导航项目 -->
		    <div class="collapse navbar-collapse navbar-collapse-example">
		      	<ul class="nav navbar-nav">
	        		<li class="active"><a href="#">{{show_text}}</a></li>
		      	</ul>
		      	{% if has_form %}
			      	<form action="/{{search_api}}" class="search_title-form navbar-form navbar-left" target="targetIfr" role="search_title">
			            <div class="form-group">
				            <select id="type_filter" name="type">
				              	<option value="--">类型</option>
					              	{% for src in typedata %}
					              		<option value="{{src.value}}">{{src.name}}</option>
					            	{% endfor %}
				              	<option value="apple">苹果</option>
				            </select>
				            	评分：
			    	        <input type="number" id="input-star-min" class="num-input form-control" placeholder="最小值" name="star-min">
		        			<input type="number" id="input-star-max" class="num-input form-control" placeholder="最大值" name="star-max">
		        			
		        				价格：
			    	        <input type="number" id="input-price-min" class="num-input form-control" placeholder="最小值" name="price-min">
		        			<input type="number" id="input-price-max" class="num-input form-control" placeholder="最大值" name="price-max">
			              	<input type="text" id="input-text" class="form-control" placeholder="搜索" name="content">
			            </div>
			            <button id="search_title-btn" type="button" class="search_title btn btn-default">搜索</button>
			        </form>
		      	{% endif %}
		      
		    
			    <!-- 右侧的导航项目 -->
			    <ul class="nav navbar-nav navbar-right">
		        	<!--用于无跳转提交请求-->
			        <iframe name="targetIfr" style="display:none"></iframe> 
			        <li><a href="/">首页</a></li>
			        <li><a href="/hot">热门</a></li>
			        <li><a href="/strange">奇葩</a></li>
			        <li><a href="/press">统计</a></li>
			        <li class="dropdown"><a href="/about">关于</a></li>
			    </ul>
		    </div> <!-- END .navbar-collapse -->
		  </div>
		</nav>
		
		<!--表格显示-->
		{% if has_search_table or has_show_table %}
			<div class="container-fluid">
				<div id="datagrid-book" class="datagrid"></div>	
			</div>
		{% endif %}
		
		{% for src in data %}
			<button class="btn {{src.label}} src-btn" onclick="location.href='/search_title/{{src.title}}'">{{src.title}}<span class="label label-badge src-label">{{src.hot}}</span></button>
		{% endfor %}
		
		{% if show_press_hist %}
		<div id="press_show" style="width:100%; height:800px"></div>
		<div id="type_show" style="width:100%; height:800px"></div>
		
		<script>
	        $("#press_show").children().remove();
	        var myChart = echarts.init(document.getElementById('press_show'));
			
			myChart.showLoading();

			    option = {
			        tooltip : {
			            trigger: 'axis',
			            axisPointer: {
			                type: 'shadow',
			                label: {
			                    show: true
			                }
			            }
			        },
			        toolbox: {
			            show : true,
			            feature : {
			                mark : {show: true},
			                dataView : {show: true, readOnly: false},
			                magicType: {show: true, type: ['line', 'bar']},
			                restore : {show: true},
			                saveAsImage : {show: true}
			            }
			        },
			        calculable : true,
//			        legend: {
//			            data:['出版社'],
//			            itemGap: 5
//			        },
			        grid: {
			            top: '12%',
			            left: '1%',
			            right: '10%',
			            containLabel: true
			        },
			        xAxis: [
			            {
			                type : 'category',
			                data : [{% for value in static_press_data.press %}"{{value}}",{% endfor %}] 
			            }
			        ],
			        yAxis: [
			            {
			                type : 'value',
			                name : '出版图书数量',
			                axisLabel: {
			                    formatter: function (a) {
			                        a = +a;
			                        return isFinite(a)
			                            ? echarts.format.addCommas(+a)
			                            : '';
			                    }
			                }
			            }
			        ],
			        dataZoom: [
			            {
			                show: true,
			                start: 94,
			                end: 100
			            },
			            {
			                type: 'inside',
			                start: 94,
			                end: 100
			            },
			            {
			                show: true,
			                yAxisIndex: 0,
			                filterMode: 'empty',
			                width: 30,
			                height: '80%',
			                showDataShadow: false,
			                left: '93%'
			            }
			        ],
			        series : [
			            {
			                name: '出版社',
			                type: 'bar',
			                data: [{% for value in static_press_data.count %}{{value}},{% endfor %}]
			            },
			        ]
			    };
			
			    myChart.setOption(option);
			
			myChart.hideLoading();
	        // use configuration item and data specified to show chart
//	        myChart.setOption(option);
			
		</script>
		
		
		<script>
	        $("#type_show").children().remove();
	        var myChart = echarts.init(document.getElementById('type_show'));
			
			myChart.showLoading();

			    option = {
			        tooltip : {
			            trigger: 'axis',
			            axisPointer: {
			                type: 'shadow',
			                label: {
			                    show: true
			                }
			            }
			        },
			        toolbox: {
			            show : true,
			            feature : {
			                mark : {show: true},
			                dataView : {show: true, readOnly: false},
			                magicType: {show: true, type: ['line', 'bar']},
			                restore : {show: true},
			                saveAsImage : {show: true}
			            }
			        },
			        calculable : true,
//			        legend: {
//			            data:['出版社'],
//			            itemGap: 5
//			        },
			        grid: {
			            top: '12%',
			            left: '1%',
			            right: '10%',
			            containLabel: true
			        },
			        xAxis: [
			            {
			                type : 'category',
			                data : [{% for value in static_type_data.type %}"{{value}}",{% endfor %}] 
			            }
			        ],
			        yAxis: [
			            {
			                type : 'value',
			                name : '出版图书数量',
			                axisLabel: {
			                    formatter: function (a) {
			                        a = +a;
			                        return isFinite(a)
			                            ? echarts.format.addCommas(+a)
			                            : '';
			                    }
			                }
			            }
			        ],
			        dataZoom: [
			            {
			                show: true,
			                start: 94,
			                end: 100
			            },
			            {
			                type: 'inside',
			                start: 94,
			                end: 100
			            },
			            {
			                show: true,
			                yAxisIndex: 0,
			                filterMode: 'empty',
			                width: 30,
			                height: '80%',
			                showDataShadow: false,
			                left: '93%'
			            }
			        ],
			        series : [
			            {
			                name: '出版社',
			                type: 'bar',
			                data: [{% for value in static_type_data.count %}{{value}},{% endfor %}]
			            },
			        ]
			    };
			
			    myChart.setOption(option);
			
			myChart.hideLoading();
	        // use configuration item and data specified to show chart
//	        myChart.setOption(option);
			
		</script>
		{% endif %}
		
		{% if show_about %}
		
			<h1 align="center" style="margin-top: 350px;">项目：Web数据管理</h1>
			<div align="center">
				<h2>
					制作人：杨浩哲<br />
					<a href="https://github.com/sailist">
					<span class="label label-badge" style="background-color: black;">
						Github
						<i class="icon icon-github icon-1x" style="margin-left: 4px;"></i>
					</span>
				</a>	
				</h2>
				<h4>
					前端框架：<a href="http://zui.sexy/">ZUI</a>、<a href="https://ecomfe.github.io/echarts-doc/public/en/index.html">ECharts</a><br />
					后端架构：Django<br />
					数据库使用：MongoDB<br />
					数据来源：BooksChina，DangDang，Amazon<br />
					数据获取：
					<a href="https://github.com/sailist/BooksCrawl">
					
						BooksCrawl
						<i class="icon icon-github icon-1x" style="margin-left: 4px;"></i>
						
					</a>
					
				</h4>
				
				
			
		{% endif %}
		
	</body>
</html>
